// 主题色配置
:root {
  // 主色
  --el-color-primary: #3b82f6;
  --el-color-primary-light-3: #60a5fa;
  --el-color-primary-light-5: #93c5fd;
  --el-color-primary-light-7: #bfdbfe;
  --el-color-primary-light-8: #dbeafe;
  --el-color-primary-light-9: #eff6ff;
  --el-color-primary-dark-2: #2563eb;

  // 成功色
  --el-color-success: #10b981;
  --el-color-success-light-3: #34d399;
  --el-color-success-light-5: #6ee7b7;
  --el-color-success-light-7: #a7f3d0;
  --el-color-success-light-8: #d1fae5;
  --el-color-success-light-9: #ecfdf5;
  --el-color-success-dark-2: #059669;

  // 警告色
  --el-color-warning: #f59e0b;
  --el-color-warning-light-3: #fbbf24;
  --el-color-warning-light-5: #fcd34d;
  --el-color-warning-light-7: #fde68a;
  --el-color-warning-light-8: #fef3c7;
  --el-color-warning-light-9: #fffbeb;
  --el-color-warning-dark-2: #d97706;

  // 危险色
  --el-color-danger: #ef4444;
  --el-color-danger-light-3: #f87171;
  --el-color-danger-light-5: #fca5a5;
  --el-color-danger-light-7: #fecaca;
  --el-color-danger-light-8: #fee2e2;
  --el-color-danger-light-9: #fef2f2;
  --el-color-danger-dark-2: #dc2626;

  // 信息色
  --el-color-info: #6b7280;
  --el-color-info-light-3: #9ca3af;
  --el-color-info-light-5: #d1d5db;
  --el-color-info-light-7: #e5e7eb;
  --el-color-info-light-8: #f3f4f6;
  --el-color-info-light-9: #f9fafb;
  --el-color-info-dark-2: #4b5563;

  // 背景色
  --el-bg-color: #f9fafb;
  --el-bg-color-page: #f9fafb;
  --el-bg-color-overlay: #ffffff;

  // 文字颜色
  --el-text-color-primary: #111827;
  --el-text-color-regular: #374151;
  --el-text-color-secondary: #6b7280;
  --el-text-color-placeholder: #9ca3af;
  --el-text-color-disabled: #d1d5db;

  // 边框颜色
  --el-border-color: #e5e7eb;
  --el-border-color-light: #f3f4f6;
  --el-border-color-lighter: #f9fafb;
  --el-border-color-extra-light: #fafafa;

  // 填充颜色
  --el-fill-color: #f3f4f6;
  --el-fill-color-light: #f9fafb;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafafa;
  --el-fill-color-dark: #e5e7eb;
  --el-fill-color-darker: #d1d5db;
  --el-fill-color-blank: #ffffff;

  // 阴影
  --el-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --el-box-shadow-light: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --el-box-shadow-lighter: 0 1px 1px 0 rgb(0 0 0 / 0.05);
  --el-box-shadow-dark: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

// 暗色主题
html.dark {
  --el-bg-color: #111827;
  --el-bg-color-page: #0f172a;
  --el-bg-color-overlay: #1f2937;
  --el-text-color-primary: #f9fafb;
  --el-text-color-regular: #f3f4f6;
  --el-text-color-secondary: #d1d5db;
  --el-text-color-placeholder: #9ca3af;
  --el-text-color-disabled: #6b7280;
  --el-border-color: #374151;
  --el-border-color-light: #4b5563;
  --el-border-color-lighter: #6b7280;
  --el-border-color-extra-light: #9ca3af;
  --el-fill-color: #1f2937;
  --el-fill-color-light: #374151;
  --el-fill-color-lighter: #4b5563;
  --el-fill-color-extra-light: #6b7280;
  --el-fill-color-dark: #111827;
  --el-fill-color-darker: #0f172a;
  --el-fill-color-blank: #1f2937;
}

// 全局样式
body {
  background-color: var(--el-bg-color-page);
  color: var(--el-text-color-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 卡片样式
.el-card {
  border-radius: 0.75rem;
  border: none;
  box-shadow: var(--el-box-shadow-light);
  transition: all 0.2s ease;

  &:hover {
    box-shadow: var(--el-box-shadow);
  }
}

// 表格样式
.el-table {
  border-radius: 0.75rem;
  overflow: hidden;

  th {
    background-color: var(--el-fill-color-light) !important;
    font-weight: 600;
    padding: 1rem;
  }

  td {
    padding: 1rem;
  }
}

// 按钮样式
.el-button {
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
  padding: 0.5rem 1rem;

  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--el-box-shadow-light);
  }
}

// 输入框样式
.el-input__wrapper {
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
  transition: all 0.2s ease;
  padding: 0.5rem 0.75rem;

  &:hover {
    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
  }

  &.is-focus {
    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
  }
}

// 对话框样式
.el-dialog {
  border-radius: 1rem;
  overflow: hidden;

  .el-dialog__header {
    margin: 0;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--el-border-color-light);
  }

  .el-dialog__body {
    padding: 1.5rem;
  }

  .el-dialog__footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--el-border-color-light);
  }
}

// 标签页样式
.el-tabs {
  .el-tabs__item {
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.75rem 1rem;

    &:hover {
      color: var(--el-color-primary);
    }

    &.is-active {
      font-weight: 600;
    }
  }

  .el-tabs__active-bar {
    height: 3px;
    border-radius: 3px;
  }
}

// 分页样式
.el-pagination {
  .el-pagination__total,
  .el-pagination__jump {
    font-weight: 500;
  }

  .el-pagination__sizes {
    .el-input__wrapper {
      box-shadow: 0 0 0 1px var(--el-border-color) inset;
    }
  }

  .el-pager li {
    font-weight: 500;
    border-radius: 0.375rem;

    &.active {
      font-weight: 600;
    }
  }
}

// 侧边栏样式
.el-menu {
  border-right: none;
  background-color: var(--el-bg-color-overlay);
  height: 100%;
  overflow-y: auto;
  
  // 隐藏滚动条但保持滚动功能
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  &::-webkit-scrollbar-thumb {
    background: transparent;
  }
  
  &::-webkit-scrollbar-track {
    background: transparent;
  }

  .el-menu-item {
    height: 3rem;
    line-height: 3rem;
    margin: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--el-text-color-regular);
    font-weight: 500;

    &:hover {
      background-color: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
    }

    &.is-active {
      background-color: var(--el-color-primary);
      color: #ffffff;
      font-weight: 600;
    }
  }

  .el-sub-menu {
    .el-sub-menu__title {
      height: 3rem;
      line-height: 3rem;
      margin: 0.25rem 0.5rem;
      border-radius: 0.5rem;
      color: var(--el-text-color-regular);
      font-weight: 500;

      &:hover {
        background-color: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
      }
    }

    .el-menu-item {
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      color: var(--el-text-color-secondary);

      &:hover {
        background-color: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
      }

      &.is-active {
        background-color: var(--el-color-primary);
        color: #ffffff;
        font-weight: 600;
      }
    }
  }
}

// 顶部导航栏样式
.el-header {
  background-color: var(--el-bg-color-overlay);
  border-bottom: 1px solid var(--el-border-color-light);
  box-shadow: var(--el-box-shadow-light);
  height: 4rem;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1000;

  .header-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;

    .logo {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--el-color-primary);
      text-decoration: none;
    }
  }

  .header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;

    .user-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      padding: 0.25rem 0.5rem;
      border-radius: 0.5rem;
      transition: all 0.2s ease;

      &:hover {
        background-color: var(--el-fill-color-light);
      }

      .avatar {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: var(--el-color-primary-light-7);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--el-color-primary);
        font-weight: 500;
      }

      .username {
        color: var(--el-text-color-primary);
        font-weight: 500;
      }
    }
  }
}

// 布局容器样式
.el-container {
  height: 98vh;

  .el-aside {
    background-color: var(--el-bg-color-overlay);
    border-right: 1px solid var(--el-border-color-light);
    width: 16rem;
    transition: width 0.2s ease;

    &.is-collapse {
      width: 4rem;
    }
  }

  .el-main {
    background-color: var(--el-bg-color-page);
    padding: 1.5rem;
  }
}

// 暗色主题适配
html.dark {
  .el-menu {
    background-color: var(--el-bg-color-overlay);

    .el-menu-item,
    .el-sub-menu__title {
      color: var(--el-text-color-regular);

      &:hover {
        background-color: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
      }

      &.is-active {
        background-color: var(--el-color-primary);
        color: #ffffff;
      }
    }

    .el-sub-menu {
      .el-menu-item {
        color: var(--el-text-color-secondary);

        &:hover {
          background-color: var(--el-color-primary-light-9);
          color: var(--el-color-primary);
        }

        &.is-active {
          background-color: var(--el-color-primary);
          color: #ffffff;
        }
      }
    }
  }

  .el-header {
    background-color: var(--el-bg-color-overlay);
    border-bottom-color: var(--el-border-color-light);
  }

  .el-aside {
    background-color: var(--el-bg-color-overlay);
    border-right-color: var(--el-border-color-light);
  }

  .el-main {
    background-color: var(--el-bg-color-page);
  }
}
